<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
    <h2>测试: v-for 遍历数组</h2>
    <ul>
      <li v-for="(p, index) in persons" :key="p.id">
          {{p.id}}---{{p.name}}---{{p.age}}
          <button @click="deleteP(index)">删除</button>
          <button @click="updateP(index,{id:Date.now(),name:'Cat',age:11})">更新</button>
      </li>
    </ul>
  
  </div>
  
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
        new Vue({
            el:'#demo',
            data:{
                persons:[
                    {id:1,name:'Tom',age:15},
                    {id:2,name:'Jack',age:12},
                    {id:3,name:'Bob',age:16},
                    {id:4,name:'Mike',age:13},
                    {id:5,name:'John',age:18},
                ]
            },
            methods: {
                deleteP(index){
                    console.log(this)
                    this.persons.splice(index,1)
                },
                updateP(index,newP){
                    //this.persons[index]=newP 数据变了,但界面不自动更新==>数据绑定失败
                    this.persons.splice(index,1,newP)
                }
            },
        })

        /*
           vue在内部如何监视数据的变化
           监视了data中所有层次的变化
           1.对象中的属性数据  (响应式属性:当修改属性值,内部就会自动更新对应的界面)
           给属性添加setter方法
           2.数组中的元素数据
           重写(重新定义)数组一系列更新数组元素的方法
           1）调用原生数组对应的方法，对数组元素进行处理
           2）更新界面

        */
  </script>
</body>
</html>